<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        Vertical Scroll
        <text>\n纵向滚动</text>
      </view>
      <view>
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
          <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
          <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
        </scroll-view>
      </view>
      <view @tap="goTop" class="uni-link uni-center uni-common-mt">
        点击这里返回顶部
      </view>

      <view class="uni-title uni-common-mt">
        Horizontal Scroll
        <text>\n横向滚动</text>
      </view>
      <view>
        <scroll-view
          class="scroll-view_H"
          scroll-x="true"
          @scroll="scroll"
          scroll-left="120"
        >
          <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
          <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
          <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
        </scroll-view>
      </view>
      <view class="uni-common-pb"></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0,
        old: {
          scrollTop: 0,
        },
      };
    },
    methods: {
      upper: function (e) {
        console.log(e);
      },
      lower: function (e) {
        console.log(e);
      },
      scroll: function (e) {
        console.log(e);
        this.old.scrollTop = e.detail.scrollTop;
      },
      goTop: function (e) {
        // 解决view层不同步的问题
        this.scrollTop = this.old.scrollTop;
        this.$nextTick(function () {
          this.scrollTop = 0;
        });
        uni.showToast({
          icon: "none",
          title: "纵向滚动 scrollTop 值已被修改为 0",
        });
      },
    },
  };
</script>

<style>
  .scroll-Y {
    height: 220rpx;
    width: 320rpx;
  }
  .scroll-view-item {
    height: 100rpx;
    text-align: center;
    align-content: center;
  }
  .scroll-view_H {
    width: 300rpx;
    white-space: nowrap;
  }
  .scroll-view-item_H {
    display: inline-block;
    width: 220rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }
</style>
